<template>
  <div>
    <h1>我是分类组件</h1>
    <!-- vue 路由的组件式跳转 
    active-class 激活样式自定义
    to="/cate/cateone/777"
    to='{name:"cate",query:{}}'
    -->
    <router-link active-class="myac" to="/cate/cateone">去衣服组件</router-link
    >|
    <router-link
      active-class="myac"
      :to="{ name: 'catetwo', query: { pid: 111 } }"
      >去裤子组件</router-link
    >|

    <router-link active-class="myac" to="/cate/catethree"
      >去装饰品组件</router-link
    >
    <hr />

    <router-view></router-view>
  </div>
</template>
<script>
export default {
  // 进入组件
  // beforeRouteEnter (to, from, next) {
  //   // ...
  // },
  // 离开组件
  // beforeRouteLeave (to, from, next) {
  //   // ...
  // }
}
</script>
<style lang="less">
.myac {
  color: red;
  font-size: 30px;
}
</style>
